Namespace("sketch.framework");

(function(fwk, ui) {
    ui.iphone.SegmentedControlItem = klass(ui.common.Grid, {
        __type__: "ui.iphone.SegmentedControlItem",

        _constructor: function(){
            var that = this;

            this.properties.createProperty("label", "Label", null)
                .editorTemplate("#editor-textbox");
            this.properties.createProperty("type", "Type", "left")
                .possibleValues({left: "left", right: "right", center: "center"});
            this.properties.createProperty("image", "Image", undefined)
                .editorTemplate("#editor-imagepicker", "toolbar");
            this.properties.createProperty("active", "Active", false)
                .editorTemplate("#editor-checkbox");
            this.properties.createProperty("style", "Style", "plain")
                .possibleValues({plain: "Plain", bordered: "Bordered", bar: "Bar", bezeled: "Bezeled"});
            this.properties.createProperty("isPreviousActive", "Is previous active", false);
            this.properties.createProperty("isOrphaned", "Is orphaned", false);

            var label = new ui.iphone.Label();
            label.canSelect(false);
            label.verticalAlign("middle");
            label.textAlign("center");
            label.singleLine(true);
            label.font().bold(true);
            this.properties.width.bind(label.properties.width.bindingPoint);
            this.properties.label.bind(label.properties.text.bindingPoint);
            this._label = label;

            var image = new fwk.ImageElement();
            image.init({
                horizontalAlignment: "center",
                verticalAlignment: "center",
                canSelect: false
            });
            this.properties.image.bind(image.properties.src.bindingPoint);
            this._image = image;

            this.init({
                $image: EventHandler(this, this._onImageChanged),
                label: "Text",
                active: false,
                width: 80,
                image: null
            });
        },

        _onImageChanged: function(event) {
            this.clear();
            if (event.newValue) {
                this.add(this._image);
            }
            else {
                this.add(this._label);
            }
        },

        readStyle: function(){
            var result = {};
            var active = this.active();
            var style = this.style();

            result.borderWidth = this.isOrphaned() ? 0 : 1;

            switch (style){
                case "plain":
                case "bordered":
                    result.radius = 13;
                    result.fontSize = 14;
                    result.fillResource = fwk.Resources["segmentedItem_plain" + (active ? "_active" : "")];
                    result.strokeStyle = active ? "#0F3E8A" : "#ADADAD";
                    result.fontColor = active ? fwk.Stroke.White.cssColor : "#696969";
                    result.borderStroke = this.isPreviousActive() ? "#4876B9" : "#A5A4A4";
                    break;
                case "bar":
                    result.radius = 6;
                    result.fontSize = 11;
                    result.strokeStyle = "#494C52";
                    result.fillResource = fwk.Resources["segmentedItem_bar" + (active ? "_active" : "")];
                    result.fontColor = fwk.Stroke.White.cssColor;
                    result.borderStroke = "#284A7C";
                    break;
                case "bezeled":
                    result.radius = 6;
                    result.fontSize = 11;
                    result.strokeStyle = "#494C52";
                    result.fillResource = fwk.Resources["segmentedItem_bezeled" + (active ? "_active" : "")];
                    result.fontColor = active ? fwk.Stroke.White.cssColor : "#A5A4A4";
                    result.borderStroke = "#284A7C";
                    break;
            }

            if (style === "bordered") {
                result.strokeStyle = "#262626";
            }

            return result;
        },

        drawSelf: function($super, context){
            var l = this.left(),
                t = this.top(),
                w = this.width(),
                h = this.height();

            var style = this.readStyle();

            context.save();

            context.strokeStyle = style.strokeStyle;
            context.fillStyle = style.fillResource.toBrush(context, l, t, l, t + h);
            this._label.font().color(style.fontColor);
            this._label.font().size(style.fontSize);

            switch (this.type()){
                case "left":
                    context.sideRoundedRectPath(l, t, w, h, style.radius, 0);
                    context.fill();
                    context.stroke();
                    break;
                case "right":
                    context.sideRoundedRectPath(l, t, w, h, 0, style.radius);
                    context.fill();
                    context.stroke();

                    context.fillStyle = style.borderStroke;
                    context.fillRect(l - style.borderWidth/2, t, style.borderWidth, h);
                    break;
                case "center":
                    context.fillRect(l, t, w, h);
                    context.strokeRect(l, t, w, h);

                    context.fillStyle = style.borderStroke;
                    context.fillRect(l - style.borderWidth/2, t, style.borderWidth, h);
                    break;
            }

            context.restore();

            $super(context);
        },

        label: function(value){
            return this.properties.label(value);
        },
        active: function(value){
            return this.properties.active(value);
        },
        style: function(value){
            return this.properties.style(value);
        },
        isPreviousActive: function(value){
            return this.properties.isPreviousActive(value);
        },
        isOrphaned: function(value){
            return this.properties.isOrphaned(value);
        },
        type: function(value){
            return this.properties.type(value);
        },
        canAccept: function(element){
            return false;
        },
        dblclick: function(){
            this.showInplaceEditor(this.properties.label);
        },
        clone: function(){
            return this.shallowCopy();
        }
    });
})(sketch.framework, sketch.ui);